<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>topu-config-common</title>
	<%@ include file="../include/common.jsp"%>
	<%@ include file="../include/tree.jsp"%>
	<script type="text/javascript">
	$(function(){
		showTopuTree();
	});
	//上移
	function up(){
		//下拉对象
		var childRes = document.getElementById("topuSelect");  
		for	(var i=1; i<childRes.options.length; i++)
		{
			if(childRes.options[i].selected)
			{
				var toption=childRes.options[i];
				childRes.insertBefore(toption, childRes.options[i-1]);
			}
		}
	}
	
	//下移
	function down(){
		var childRes = document.getElementById("topuSelect"); 
		for	(var i=childRes.options.length-2; i>=0; i--)
		{
			if(childRes.options[i].selected)
			{
				var	toption=childRes.options[i];
				childRes.insertBefore(toption, childRes.options[i+2]);
			}
		}
	}
	
	//移至顶层
	function toTop(){
		
	 	var ops = document.getElementById("topuSelect");
			var count=0;
			for	(var i=1; i<ops.options.length; i++)
		{
			if(ops.options[i].selected)
			{
				var toption=ops.options[i];
				ops.insertBefore(toption, ops.options[count]);
				count++;
			}
		}
	}
	
	//移至底层
	function bottom(){
		var ops = document.getElementById("topuSelect");
			var count=ops.options.length;
			for	(var i=ops.options.length-1; i>=0; i--)
		{
			if(ops.options[i].selected)
			{
				var toption=ops.options[i];
				ops.insertBefore(toption, ops.options[count]);
				count--;
			}
		}
	}
	  function save(){
		    var options = $('#topuSelect option');
		    //if(options.length == 0){
	  		//	getTopWin(window).getMessageBox().alert("请先勾选拓扑","提示");
	  		//	return;
	  		//}
	  		var ids = '';
	  		$.each(options,function(index,ob){
	  			ids += ob.value;
	  			if(index!=(options.length-1)){
	  				ids+=',';
	  			}
	  		});
	  		$.ajax({
				type:'post',
				url:'${pageContext.request.contextPath}/config/topu-config!save.action',
				data:{ids:ids},
				global:false,
				async:false,
				cache:false,
				dataType:'json',
				success:function(data,textStatus){
					getTopWin(window).getMessageBox().tip('保存成功', 'success'); 
				},
				error:function(){
					getTopWin(window).getMessageBox().alert('服务器内部错误,请联系管理员','错误');
				}
			});
	  }
	function showTopuTree(){
		$.ajax({ 
			  type:"post", 
			  url:"${pageContext.request.contextPath}/config/topu-config!initTopoTree.action", 
			  data:"treeNodes="+'${treeNodes}', 
			  datatype:"json",
			  success:function(data) { 
					var zNodes=eval(data);
					$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			  } 
	     	})
	}
	var setting = {
			check: {
				enable: true,
				chkboxType: {"Y" : "ps", "N" : "ps"}
			},
			view: {
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onCheck: onCheck
			}
		};
	function onCheck(e, treeId, treeNode) {
		//播放的拓扑中的节点
		var options = $('#topuSelect option');
	  	var ids = '';
	  	var values = '';
	  	$.each(options,function(index,ob){
	  		ids += ob.value;
	  		values += ob.text;
	  		if(index!=(options.length-1)){
	  			ids+=',';
	  			values+=',';
	  		}
	  	});
	  	//树中选中的节点
	  	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		nodes = zTree.getCheckedNodes(true);
		var ids1 = '';
	  	var values1 = '';
	  	var j = 0;
		for (var i=0; i<nodes.length; i++) {
			var str ;
			if(typeof(nodes[i].id) == 'number'){
				str = String(nodes[i].id);
			}else{
				str = nodes[i].id;
			}
			if(str.split("_")[0] != "catalogId"){
				ids1 += nodes[i].id;
		  		values1 += nodes[i].name;
		  		if(i != nodes.length-1){
		  			ids1 +=',';
		  			values1 +=',';
		  		}
			}
		}
	  	//判断播放中的拓扑是否包含左侧选中的
	  	//删除多余的 
	  	var newIds = '';
	  	var newValues = '';
	  	idsArray = ids.split(",");
	  	valuesArray = values.split(",");
	  	idsArray1 = ids1.split(",");
	  	valuesArray1 = values1.split(",");
	  	for(var i = 0 ; i < idsArray.length; i++){
	  		for(var j = 0 ; j< idsArray1.length; j++){
	  			if(idsArray[i] == idsArray1[j]){
	  				newIds+=idsArray[i]+",";
	  				newValues+=valuesArray[i]+",";
	  			}
	  		}
	  	}
	  	//添加新选的
	  	for(var i = 0 ; i < idsArray1.length; i++){
	  		var flag = true;
	  		for(var j = 0 ; j< idsArray.length; j++){
	  			if(idsArray1[i] == idsArray[j]){
	  				flag = false;
	  				break;
	  			}
	  		}
	  		if(flag){
	  			newIds+=idsArray1[i]+",";
	  			newValues+=valuesArray1[i]+",";
	  		}
	  	}
	  	//给播放的拓扑添加选项
	  	newIds = newIds.substring(0, newIds.lastIndexOf(","));
	  	newValues = newValues.substring(0, newValues.lastIndexOf(","));
		var obj= document.getElementById("topuSelect");
		obj.length=0;
		for (var i=0; i< newIds.split(",").length; i++) {
			if(newIds.split(",")[i] != ""){
				obj.options[i]=new Option(newValues.split(",")[i],newIds.split(",")[i]);
			}
		}
		$("#topu").val(newIds);
	}
	</script>
  </head>
  
  <body>
  		<input type="hidden" id="topu" name="topu"/>
  		<div style="float: none;">
  			<div style="float: left; padding: 10px;">
	  			<h2 class="title-h2"><span><img src="${pageContext.request.contextPath}/style/default/bsm/images/arrow-down.gif"/></span>拓扑和性能图目录</h2>
	  			<ul id="treeDemo" class="ztree" style="margin-top:0; width:300px; height:500px; border-style:solid; border-width:1px; border-color:#cccccc;overflow: auto;"></ul>
	  		</div>
	  		<div style="float: left; padding: 10px">
	  			<h2 class="title-h2"><span><img src="${pageContext.request.contextPath}/style/default/bsm/images/arrow-down.gif"/></span>播放的拓扑和性能图</h2>
	  			<select multiple="multiple" style="width: 250px;height: 510px; border-style:solid; border-width:1px; border-color:#cccccc;overflow: auto;" id="topuSelect">
	  				<c:forEach items="${list}" var="e">
				          <option value=${e.id}>${e.name}</option>
					</c:forEach>
	  			</select>
	  		</div>
	  		<div style="float: left;width: 80px; padding-top: 120px;" >
	  				<input type="button" value="移至顶层" onclick="toTop()" id="top" class="btn-4" />
	  				<br/>
	  				<br/>
	  				<input type="button" value=" 上 移 &nbsp;" onclick="up()" id="up" class="btn-4"/>
	  				<br/>
	  				<br/>
	  				<input type="button" value=" 下 移 &nbsp;" onclick="down()" id="down"  class="btn-4" />
	  				<br/>
	  				<br/>
	  				<input type="button" value="移至底层" onclick="bottom()" id="bottom"  class="btn-4" />
	  				<br/>
	  				<br/>
	  				<br/>
	  				<br/>
	  				<input type="button" value=" 保 存 &nbsp;" class="btn-4" onclick="save();"/>
	  		</div>
  		</div>
  </body>
</html>
